downLoa<template>

  <div class="show-pc">
    <div class="works_item">
      <div class="title_item">
        <div class="title_text">图片信息</div>
        <div class="item_right">
          <div class="info_item">下载时间</div>
          <div class="info_item">目录分类</div>
          <div class="info_item">下载</div>
        </div>
      </div>
      <div class="item_box" v-for="(item, index) in downList">
        <div class="box_left">
          <div class="imgUrl_box" @click="toDetail(item)">
            <sshbImage :width="400" :height="200" :src="item.picUrl" style="border-radius: 0.52vw;">
            </sshbImage>
          </div>
          <div class="img_text">
            <div class="introduce">{{ item.picTitle }}</div>
            <div class="img_details">
              <p class="p_text">素材Id: {{ item.fodderId }}</p>

              <p class="p_text">格式：{{ methods.getFileFormat(item.picUrl) }}</p>
            </div>
          </div>
        </div>
        <div class="box_right">
          <div class="info_data">{{ item.createTime }}</div>
          <div class="info_data">{{ item.columnName }}</div>

          <div class="downloadBtn" v-if="item.downloadType === '1'" @click.stop="downLoad(item.picUrl, item.picTitle, index)">
            <a-spin :spinning="loadingUpload === index" size="large" class="downloadBtn"  tip="下载中..."/>
            <div class="btn-item" v-if="loadingUpload !== index">
              重新下载
            </div>
          </div>
          <div class="downloadBtn" v-if="item.downloadType === '2'" @click.stop="downLoad(item.fileId, item.picTitle, index)">
            <a-spin :spinning="loadingUpload === index" size="large" class="downloadBtn"  tip="下载中..."/>
            <div class="btn-item" v-if="loadingUpload !== index">
              重新下载
            </div>
          </div>
        </div>

      </div>
    </div>
    <!-- 加载动画 -->
    <div v-if="loading" class="loading-container">
      <a-spin size="large" class="custom-spin" />
    </div>
    <!-- 触发懒加载的占位元素 -->
    <div v-else ref="myElement"></div>

    <div style="height: 50px"></div>
    <!-- 空数据提示 -->
    <div>
      <template v-if="(downList.length === 0 && !loading) || !isMove">
        <a-empty description="我也是有底线的" style="color: var(--color-text);" />
      </template>
    </div>
  </div>
  <!-- 手机 -->
  <div class="show-wap">
    <div class="works_item-wap">
      <div class="title_item-wap">
        <div class="title_text-wap">图片信息</div>

      </div>
      <div class="item_box-wap" v-for="item in downList">
        <div class="box_left-wap">
          <div class="imgUrl_box-wap" @click="toDetail(item)">
            <sshbImage :width="1660" :height="1000" :src="item.picUrl" style="border-radius: 10px;">
            </sshbImage>
          </div>
          <div class="img_text-wap">
            <div class="introduce-wap">{{ item.picTitle }}</div>
            <div class="img_details-wap">
              <p class="p_text-wap">素材ID: 1066633</p>
              <p class="p_text-wap" v-if="item.downloadType === '1'">格式：{{ methods.getFileFormat(item.picUrl) }}</p>
              <p class="p_text-wap" v-if="item.downloadType === '2'">格式：{{ methods.getFileFormat(item.fileId) }}</p>
            </div>
          </div>
          <div class="box_right-wap">
            <div>
              下载时间： {{ item.createTime }}
            </div>
            <div>
              目录分类： {{ item.columnName }}
            </div>
            <!-- <div>
              下载：重新下载
            </div> -->

          </div>
        </div>

      </div>
      <!-- 加载动画 -->
      <div v-if="loading" class="loading-container">
        <a-spin size="large" class="custom-spin" />
      </div>
      <!-- 触发懒加载的占位元素 -->
      <div v-else ref="myElement"></div>

      <div style="height: 50px"></div>
      <!-- 空数据提示 -->
      <div>
        <template v-if="(downList.length === 0 && !loading) || !isMove">
          <a-empty description="我也是有底线的" style="color: var(--color-text);" />
        </template>
      </div>
    </div>
  </div>
</template>

<script setup>
import sshbImage from '@/sshbComponents/sshbImage/index.vue';
import methods from '@/utils/methods'
import { useHttp } from '@/api/http'
import { useRouter } from 'vue-router'

const router = useRouter()

const loading = ref(false)
const isMove = ref(true)
const queryParams = ref({
  pageNo: 1,
  pageSize: 10,
})
const myElement = ref(null)



const downList = ref([]);
const getDownList = () => {

  if (loading.value || !isMove.value) return
  loading.value = true
  useHttp.get('/web/my/myDownLoadList').then(res => {
    downList.value.push(...res.result.records)
    loading.value = false
    if (res.result.records.length < queryParams.value.pageSize) {
      isMove.value = false
    }


  })
}
getDownList()
// 前往详情
const toDetail = (item) => {
  window.open(`${BASEURLTZ}/details/${item.picId}`, "_blank ")

}

const loadingUpload = ref(-1)
// 下载按钮
const downLoad = (file, fileName, index) => {
  if(loadingUpload.value !== -1) return
  loadingUpload.value = index
  methods.createLinkAndDownload(file, fileName).then(res => {
    loadingUpload.value = -1
  })
}


const handleScroll = () => {
  if (!myElement.value || loading.value || !isMove.value) return

  const rect = myElement.value.getBoundingClientRect()
  const windowHeight = window.innerHeight || document.documentElement.clientHeight

  // 当占位元素进入视口底部一定距离时加载更多
  if (rect.top <= windowHeight + 200) {
    queryParams.value.pageNo += 1
    getConcernList()
  }
}


onMounted(() => {
  window.addEventListener('scroll', handleScroll)
})

onUnmounted(() => {
  window.removeEventListener('scroll', handleScroll)
})


</script>

<style lang="less" scoped>
.works_item {
  width: 95.83333333333334vw;
  margin: 1vw auto;
  width: 100%;
  font-family: Arial, sans-serif;

  .title_item {
    width: 98%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--color-text);
    font-size: var(--text-16);
    padding: 0 0.52vw;
    box-sizing: border-box;
    margin-bottom: 0.41vw;

    .title_text {
      flex: 1;
      font-weight: bold;

    }

    .item_right {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      width: 50%;
      text-align: center;

      .info_item {
        font-weight: bold;
        padding: 0 0.26vw;

      }
    }
  }

  .item_box {
    width: 98%;
    margin: 0 auto;

    margin-top: 1.04vw;
    height: auto;
    min-height: 9.37vw;
    background-color: var(--color-bg-20);
    border-radius: 0.52vw;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
    display: flex;
    padding: 0.78vw;
    box-sizing: border-box;

    .box_left {
      display: flex;
      flex: 1;
      align-items: center;
      gap: 1vw;


      .imgUrl_box {
        flex-shrink: 0;

        // img {
        //   width: 100%;
        //   height: 100%;
        //   object-fit: cover;
        //   border-radius: 8px;

        // }
      }

      .img_text {
        display: flex;
        flex-direction: column;
        gap: 0.62vw;


        .introduce {
          font-size: var(--text-16);
          color: var(--color-text);
          line-height: 1.4;
          font-weight: 500;

        }

        .img_details {
          .p_text {
            font-size: var(--text-14);
            color: var(--color-text);
            line-height: 1.6;

          }
        }
      }
    }

    .box_right {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      width: 50%;
      align-items: center;
      text-align: center;

      .info_data {
        font-size: var(--text-14);
        color: var(--color-text);
        padding: 0 0.2vw;
      }

      .downloadBtn {

        .btn-item {
          width: 4vw;
          height: 1.5vw;
          margin: 0 auto;
          text-align: center;
          line-height: 1.5vw;
          font-size: var(--text-12);
          color: var(--color-text-3);
          border-radius: 0.3vw;
          background-color: var(--ba-color-sel);
          cursor: pointer;

        }
      }
    }
  }
}

.loading-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 300px;
  width: 100%;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .works_item {
    max-width: 95vw;

    .title_item {
      .item_right {
        width: 60%;
      }
    }

    .item_box {
      flex-direction: column;

      .box_left {
        flex-direction: column;
        gap: 15px;

        .imgUrl_box {
          width: 100%;
          height: auto;
          aspect-ratio: 16/9;
        }
      }

      .box_right {
        width: 100%;
        margin-top: 15px;
        padding-top: 15px;
        border-top: 1px solid #f0f0f0;
      }
    }
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .works_item {
    .item_box {
      .box_left {
        .imgUrl_box {
          width: 180px;
          height: 110px;
        }

        .img_text {
          gap: 10px;

          .introduce {
            font-size: 15px;
          }
        }
      }
    }
  }
}




.works_item-wap {
  width: 95.83333333333334vw;
  margin: 20px auto;
  width: 100%;
  font-family: Arial, sans-serif;
  padding-bottom: 20px;

  .title_item-wap {
    width: 98%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--color-text);
    font-size: 14px;
    padding: 0 10px;
    box-sizing: border-box;
    margin-bottom: 8px;

    .title_text-wap {
      flex: 1;
      font-weight: bold;

    }

    .item_right-wap {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      // width: 50%;
      text-align: center;

      .info_item-wap {
        width: auto;
        font-weight: bold;
        padding: 0 5px;
      }
    }
  }

  .item_box-wap {
    width: 98%;
    margin: 0 auto;
    margin-top: 20px;
    height: auto;
    min-height: 180px;
    background-color: var(--color-bg-20);
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
    display: flex;
    padding: 15px;
    box-sizing: border-box;

    .box_left-wap {
      display: grid;
      flex: 1;
      align-items: center;
      // gap: 20px;

      .imgUrl_box-wap {
        // width: 200px;
        // height: 120px;
        // flex-shrink: 0;

        // img {
        //   width: 100%;
        //   height: 100%;
        //   object-fit: cover;
        //   border-radius: 8px;
        // }
      }

      .img_text-wap {
        display: flex;
        flex-direction: column;
        gap: 8px;

        .introduce-wap {
          margin-top: 8px;
          font-size: 16px;
          color: var(--color-text);
          line-height: 1.4;
          font-weight: 500;
        }

        .img_details-wap {
          display: grid;
          gap: 8px;

          .p_text-wap {
            font-size: 13px;
            color: var(--color-text);
            line-height: 1.6;
          }
        }
      }
    }

    .box_right-wap {
      margin-top: 8px;
      display: grid;
      gap: 8px;
      color: var(--color-text);
      font-size: 14px;
      // grid-template-columns: repeat(3, 1fr);
      // width: 50%;
      // align-items: center;
      // text-align: center;

      // .info_data-wap {
      //   font-size: 13px;
      //   color: var(--color-text);
      //   padding: 0 5px;


      // }
    }
  }
}
</style>